import { IconMore } from '@douyinfe/semi-icons'
import { Form, Col, Row, Button, Space, Tabs, TabPane, RadioGroup } from '@douyinfe/semi-ui'

interface Props {
  children?: React.ReactNode
}

const component = ({ children, ...props }: Props) => {
  const {
    Section,
    Input,
    InputNumber,
    AutoComplete,
    Select,
    TreeSelect,
    Cascader,
    DatePicker,
    TimePicker,
    TextArea,
    CheckboxGroup,
    Checkbox,
    Radio,
    Slider,
    Rating,
    Switch,
    TagInput,
  } = Form

  const style = { width: '100%' }

  const [value, setValue] = useState(1)

  return (
    <>
      <Form style={{ padding: 10, width: '100%' }} onValueChange={(v) => console.log(v)}>
        <Row style={{ display: 'flex', justifyContent: 'center' }} gutter={10}>
          <Col span={4}>
            <Select field="role" initValue={0} style={style} label="Brand：48">
              <Select.Option value={0}>NONE</Select.Option>
              <Select.Option value={1}>HUAWEI</Select.Option>
              <Select.Option value={2}>OPPO</Select.Option>
              <Select.Option value={3}>XIAOMI</Select.Option>
              <Select.Option value={4}>VIVO</Select.Option>
            </Select>
          </Col>
          <Col span={4}>
            <Select field="role" initValue={0} label="Models" style={style}>
              <Select.Option value={0}>NONE</Select.Option>
              <Select.Option value={1}>HUAWEI</Select.Option>
              <Select.Option value={2}>OPPO</Select.Option>
              <Select.Option value={3}>XIAOMI</Select.Option>
              <Select.Option value={4}>VIVO</Select.Option>
            </Select>
          </Col>
          <Col span={4}>
            <Select field="role" initValue={0} label="Brands" style={style}>
              <Select.Option value={0}>NONE</Select.Option>
              <Select.Option value={1}>HUAWEI</Select.Option>
              <Select.Option value={2}>OPPO</Select.Option>
              <Select.Option value={3}>XIAOMI</Select.Option>
              <Select.Option value={4}>VIVO</Select.Option>
            </Select>
          </Col>
          <Col span={4}>
            <Select field="role" initValue={0} label="Modes" style={style}>
              <Select.Option value={0}>NONE</Select.Option>
              <Select.Option value={1}>HUAWEI</Select.Option>
              <Select.Option value={2}>OPPO</Select.Option>
              <Select.Option value={3}>XIAOMI</Select.Option>
              <Select.Option value={4}>VIVO</Select.Option>
            </Select>
          </Col>
          <Col span={4} style={{ display: 'flex', justifyContent: 'center' }}>
            <Button theme="solid" size="large" type="primary" style={{ height: '100%', width: '90%', fontSize: 20 }}>
              START
            </Button>
          </Col>
          <Col span={4} style={{ display: 'flex', justifyContent: 'center' }}>
            <Button theme="solid" size="large" type="primary" style={{ height: '100%', width: '90%', fontSize: 20 }}>
              END
            </Button>
          </Col>
        </Row>
        <Row style={{ display: 'flex', justifyContent: 'center' }} gutter={10}>
          <Col span={8}>
            <Select field="role" initValue={0} style={style} label="Setting">
              <Select.Option value={0}>NONE</Select.Option>
              <Select.Option value={1}>HUAWEI</Select.Option>
              <Select.Option value={2}>OPPO</Select.Option>
              <Select.Option value={3}>XIAOMI</Select.Option>
              <Select.Option value={4}>VIVO</Select.Option>
            </Select>
          </Col>
          <Col span={4}>
            <Select field="role" initValue={0} label="Auth file" style={style}>
              <Select.Option value={0}>NONE</Select.Option>
              <Select.Option value={1}>HUAWEI</Select.Option>
              <Select.Option value={2}>OPPO</Select.Option>
              <Select.Option value={3}>XIAOMI</Select.Option>
              <Select.Option value={4}>VIVO</Select.Option>
            </Select>
          </Col>
          <Col span={4}>
            <Select field="role" initValue={0} label="Preloader" style={style}>
              <Select.Option value={0}>NONE</Select.Option>
              <Select.Option value={1}>HUAWEI</Select.Option>
              <Select.Option value={2}>OPPO</Select.Option>
              <Select.Option value={3}>XIAOMI</Select.Option>
              <Select.Option value={4}>VIVO</Select.Option>
            </Select>
          </Col>
          <Col span={8} style={{ display: 'flex', alignItems: 'center', paddingTop: 18 }}>
            <Space wrap>
              <Checkbox defaultChecked>Skip Read Info</Checkbox>
              <Checkbox>Crash Preloader</Checkbox>
              <Checkbox>Backup Security</Checkbox>
              <Checkbox>Auto Reboot</Checkbox>
              <Checkbox>By Model</Checkbox>
              <Checkbox>PreloaderExploit</Checkbox>
              <Checkbox>Auto Detect Model - Universal</Checkbox>
            </Space>
          </Col>
        </Row>
      </Form>
      <div className="border-0 border-t border-solid border-[var(--semi-color-fill-1)] py-3 px-2">{children}</div>
    </>
  )
}

export default component
